<template>
  <!-- 救济金 -->
  <div class="transactions">
    <div class="header-mine-search">
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
          <div class="search__list-label search__list-label-long">{{t("RescueFund.RescueFund")}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.type" clearable size="small">
              <el-option
                v-for="item in getEnumOptions('rescueFundsStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search__list-label" style="min-width: 20rem;"></div>
          <div class="search__list-wrapper small-wrapper">
            <el-input v-model="form.number" size="small" :placeholder="t('RescueFund.text7')">
              <template #prefix>
                <i-uil-search />
              </template>
            </el-input>
          </div>
        </div>
        <div class="header-mine-search__list">
          <el-button type="primary" class="header-mine-search__btns member-rebate-search" @click="getJoinRescue" :loading="btnLoading">{{t("BetRecord.Search")}}</el-button>
        </div>
      </div>
    </div>
    <div class="dialog-content">
      <div class="dialog-content-box">
        <div class="dialog-content-wrapper">
          <el-table :data="memberRebate" height="100%" class="record-table" :empty-text="t('BetRecord.Nocontent')">
            <el-table-column align="center" prop="joinId" :label="t('RescueFund.text8')" width="180"/>
            <el-table-column align="center" prop="currencyId" :label="t('RescueFund.text9')">
              <template #default="{row}">
                {{ piniaUserinfo.queryCurrencyInfo(row.currencyId, 'name') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="discountAmount" :label="t('RescueFund.text10')"/>
            <el-table-column align="center" :label="t('RescueFund.text11')" width="180">
              <template #default="{row}">
                {{ parseTime(row.activityJoinTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" :label="t('RescueFund.text12')">
              <template #default="{row}">
                <el-button v-if="row.status == '1'" type="primary" @click="addJoinRescueSingle(row)" :loading="addJoinLoading">{{t(getEnumValue('rescueFundsStatus', row.status))}}</el-button>
                <span v-else>{{ t(getEnumValue('rescueFundsStatus', row.status)) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <div class="record-pagination" v-if="memberRebate.length !== 0">
      <ZPagination
        v-model:pagination="pagination"
        :query="getJoinRescue"
      />
    </div> -->
    <div class="member-rebate-footer-btn">
      <el-button type="primary" v-if="unclaimed.length > 0" class="header-mine-search__btns member-rebate-search" @click="addJoinRescue" :disabled="unclaimed.length == 0">{{t("Rebate.reward")}}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="RescueFundsPc">
import userinfo from '@/store/userinfo';
import recordApi from '@/api/modules/record';
import { parseTime } from '@/utils/format';
import { getEnumValue, getEnumOptions } from '@/utils/enums';

const piniaUserinfo:any = userinfo();
const global:any = getCurrentInstance()?.appContext.config.globalProperties;
const { t } = useI18n();
const data:any = reactive({
  form: {
    date: [
      parseTime(new Date(), '{y}:{m}:{d}'),
      parseTime(new Date(), '{y}:{m}:{d}')
    ],
    type: ""
  },
  options: [],
  memberRebate: [], // 会员返水
  unclaimed: [], // 待领取
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  btnLoading: false,
  addJoinLoading: false,
});

const {
  form,
  options,
  memberRebate,
  unclaimed,
  pagination,
  btnLoading,
  addJoinLoading,
} = toRefs(data);

const shortcuts = [
  {
    text: t('lang.el.datepicker.lastweek'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth3'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const getJoinRescue = () => {
  btnLoading.value = true;
  recordApi.getJoinRescue({
    number: form.value.number,
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    type: form.value.type,
    userId: piniaUserinfo.getUserinfo.user.id
  }).then((response:any)=>{
    console.log("会员返水", response)
    if(response.code === 200){
      memberRebate.value = response.data;
      unclaimed.value = memberRebate.value.filter((im:any)=>im.receiveStatus == 0);
      pagination.value.total = response.total;
    }
  }).finally(()=>{
    btnLoading.value = false;
  });
}
getJoinRescue();



// 单一领取
const addJoinRescueSingle = (item: any) => {
  if (item.status == '1') {
    addJoinLoading.value = true;
    recordApi.addJoinRescue({joinId: item.joinId}).then((response:any) => {
      console.log(response)
      if (response.code == 200) {
        global.message(response.msg);
        getJoinRescue();
      }
    }).finally(()=>{
      addJoinLoading.value = false;
    })
  }
}

// 领取救济金
const addJoinRescue = () => {
  recordApi.addJoinRescue({
    userId: piniaUserinfo.getUserinfo.user.id,
    backWaterReceiveIds: unclaimed.value.map((im:any)=>im.id).join(',')
  }).then((response:any) => {
    if (response.code == 200) {
      getJoinRescue();
    }
  })
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
